<template>
	<view class="edit-user-desc-wrap full box relative">
		<view class="content-wrap">
			<view class="header-wrp">
				<text>{{ labelTitle }}</text>
			</view>
			<view class="content-wrap-inner">
				<textarea v-if="type === 'desc'" class="textarea" :placeholder="placeholder" v-model="content"
					:maxlength="max"></textarea>
				<!-- <input class="job-input" v-if="type==='job'" placeholder="请输入您的职业" v-model="content" /> -->
				<!-- <input class="job-input" v-if="type==='address'" placeholder="请输入您的所在地" v-model="content" /> -->
				<input class="job-input" v-if="type==='nickname'" :placeholder="placeholder" v-model="content" />
				<input class="job-input" type="tel" v-if="type==='mobile'" :placeholder="placeholder"
					v-model="content" />
				<view class="footer-count" v-if="type === 'desc'">
					<text>{{ content.length }}/{{ max }}</text>
				</view>
			</view>
		</view>
		<view class="confirm-btn">
			<u-button type="success" text="确认" @click="confirmHandle"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(ev) {
			// if (!ev.hasOwnProperty('type')) {
			// 	return this.$toast({ title: "参数错误" }, () => {
			// 		uni.navigateBack()
			// 	})
			// }
			// const { type } = ev
			// this.type = type
			if (!this._eventChannel) {
				this._eventChannel = this.getOpenerEventChannel()
				this._eventChannel.on('onEdit', this.onEdit)
			}
		},
		onUnload() {
			if (!this._eventChannel) return
			this._eventChannel.off('onEdit', this.onEdit)
		},
		methods: {
			onEdit({ type, value }) {
				const typeEnum = {
					desc: '请输入个性签名',
					nickname: '请输入您的昵称',
					mobile: '请输入手机号'
				}
				if (!!value) {
					this.placeholder = value
				} else {
					this.placeholder = typeEnum[type]
				}
				this.type = type
			},
			confirmHandle() {
				const { type, content, labelTitle } = this
				if (!content.length) return this.$toast({ title: labelTitle })
				if (type === 'mobile') {
					if (!uni.$u.test.mobile(content)) {
						return this.$toast({ title: '请输入正确的手机号' })
					}
				}
				uni.$emit('editInfo', {
					type,
					value: content,
				})
				this.$toast({ title: '编辑成功', time: 1000 }, () => {
					uni.navigateBack()
				})
			},
		},
		computed: {
			labelTitle() {
				const titleEnum = {
					job: '请输入职业',
					desc: '请输入个性签名',
					address: '请输入您的地址',
					nickname: '请输入您的昵称',
					mobile: '请输入手机号'
				}
				const { type } = this
				if (!titleEnum.hasOwnProperty(type)) {
					return '请输入'
				}
				return titleEnum[type]
			}
		},
		data() {
			return {
				type: '',
				max: 500,
				content: '',
				_eventChannel: null,
				placeholder: '',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit-user-desc-wrap {
		background: $bg-color;
		padding-top: 24rpx;

		.confirm-btn {
			margin-top: 32rpx;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.content-wrap {
			background-color: #FFF;
			padding: 24rpx 0 32rpx 32rpx;
			box-sizing: border-box;
			position: relative;

			.content-wrap-inner {
				margin-top: 22rpx;
				padding-right: 32rpx;
				box-sizing: border-box;
				display: flex;
				flex-flow: column;

				.footer-count {
					display: flex;
					justify-content: flex-end;
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 40rpx;
					margin-top: 16rpx;
				}

				.job-input {
					width: 100%;
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 48rpx;
				}

				.textarea {
					height: 192rpx;
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 48rpx;
					width: 100%;
				}
			}

			.header-wrp {
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.9);
				line-height: 48rpx;
				border-bottom: 1px solid #E7E7E7;
				box-sizing: border-box;
				padding-bottom: 26rpx;
			}
		}
	}
</style>